<template>
  <view class="container">
    <!-- 顶部banner -->
    <ne-swiper carousel-type="3" />
    <!-- 功能导航 -->
    <nav-list :options="options" />
    <!-- 法治讲堂 -->
    <view class="section">
      <text class="section-title">法治讲堂</text>
      <view class="article-list">
        <article-item
          v-for="item in dataSource"
          :key="item.indexCode"
          :row="item"
        />
        <van-empty v-if="!dataSource.length" description="暂无数据" />
      </view>
    </view>
  </view>
</template>

<script>
import NavList from '../../components/NavList.vue'
import articleItem from './components/articleItem.vue'
import NeSwiper from '../../components/NeSwiper.vue'
import pagingMixin from '../../mixins/pagingMixin'
export default {
  name: 'wx_pages_fzbz_index',
  components: { NeSwiper, articleItem, NavList },
  mixins: [pagingMixin],
  data() {
    return {
      articles: [],
      restfulApi: '/tbLawPropaganda/page',
      options: [
        {
          url: '/pages/fzbz/qmfzTable',
          title: '全民反诈',
          icon: '/menu-5.png',
        },
        {
          url: '/pages/fzbz/businessPro',
          title: '业务办理',
          icon: '/menu-6.png',
        },
        {
          url: '/pages/fzbz/dispute',
          title: '矛盾纠纷',
          icon: '/menu-7.png',
        },
        {
          url: '/pages/fzbz/gridStaff',
          title: '线上警务站',
          icon: '/menu-8.png',
        },
      ],
    }
  },
  onPullDownRefresh() {
    this.search()
  },
  onLoad() {
    this.search({ lawType: '1' })
  },
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 12px;
  overflow: auto;
}

/* Banner */
.banner {
  width: 100%;
  height: 360rpx;
  background-color: #0052d9;
}

/* 法治讲堂 */
.section {
  margin-top: 20rpx;
}

.section-title {
  font-size: 34rpx;
  color: $uni-color-primary;
  font-weight: 500;
  margin: 20rpx 0;
  display: inline-block;
}

.article-list {
  display: flex;
  flex-direction: column;
}
</style>
